<template>
    <div class="my">
        <div class="car_top">
            <a>
                <em class="set"><img src="../../images/set_w.png"></em>
            </a>
            <p>购物车</p>
            <span><u><img src="../../images/more.png"></u></span>			
        </div>
        <div class="my_head">
			<i><img src="../../images/05728119946145412.jpg"></i>
			<span>lihua <sup>V0</sup></span>
			<p>
				<span><i>0</i>商品收藏</span>
				<span><i>0</i>商品收藏</span>
				<span><i><img src="../../images/goods-browse_w.png"></i>商品收藏</span>
			</p>
		</div>
        <div class="order">
			<i><img :src="mcimg[0]"></i>
			<span>{{mctitle[0]}}</span>
			<u><img src="../../images/right.png"></u>
			<em>查看全部订单</em>
		</div>
        <ul class="orul_1">
			<li v-for="(v,i) in orul_1">
                
				<i><img :src="v.img"></i>
				<span>{{v.msg}}</span>
			</li>
		</ul>
         <div class="order">
			<i><img :src="mcimg[1]"></i>
			<span>{{mctitle[1]}}</span>
			<u><img src="../../images/right.png"></u>
			<em>查看全部财产</em>
		</div>
        <ul class="orul_1">
			<li v-for="(v,i) in orul_2">
				<i><img :src="v.img"></i>
				<span>{{v.msg}}</span>
			</li>
		</ul>
        <div class="order">
			<i><img :src="mcimg[2]"></i>
			<span>{{mctitle[2]}}</span>
			<u><img src="../../images/right.png"></u>
		</div>
        <div class="order user">
			<i><img :src="mcimg[3]"></i>
			<span>{{mctitle[3]}}</span>
			<u><img src="../../images/right.png"></u>
		</div>
        <div class="order">
			<i><img :src="mcimg[4]"></i>
			<span>{{mctitle[4]}}</span>
			<u><img src="../../images/right.png"></u>
		</div>
        <div class="order">
			<i><img :src="mcimg[5]"></i>
			<span>{{mctitle[5]}}</span>
			<u><img src="../../images/right.png"></u>
		</div>
        <div class="order">
			<i><img :src="mcimg[6]"></i>
			<span>{{mctitle[6]}}</span>
			<u><img src="../../images/right.png"></u>
		</div>
        <div class="back">
                <span><router-link to="/my">我的商城</router-link></span>
                <span>反馈</span>
                <span>返回顶部</span>
            </div>    
            <div class="app">
                <p>				
                    <span>
                        <i><img src="../../images/jiangjin.png"></i>
                        <b><img src="../../images/app1.png"></b>
                    </span>
                    <em>下载有奖</em>
                </p>
                <p>				
                    <span><img src="../../images/app2.png"></span>
                    <em class="secem">触屏版</em>
                </p>
                <p>				
                    <span><img src="../../images/app3.png"></span>
                    <em>电脑版</em>
                </p>
            </div>
            <div class="cound">淘库科技提供云计算技术服务</div>



    </div>   
</template>

<script>
    export default{
        data(){
            return{
                orul_1:{},
                mcimg:[],
                mctitle:[],
                orul_2:{}

            }
        },
        mounted(){
            this.$http.get('../../data/my.json')
            .then((response)=>{
                this.orul_1=response.data.orul_1;
                this.mcimg=response.data.mcimg;
                this.mctitle=response.data.mctitle;
                this.orul_2=response.data.orul_2;
            })
            .catch(function (error) {
		     // handle error
		     console.log(error);
		   })
		   .then(function () {
		     // always executed
		   });
        }
    }
</script>
<style scoped>
.my{
    width:100%;
    background:#F5F5F5;
}
/*头部导航栏*/
    .car_top{
		height: 2.2rem;
        width: 100%;
        position: fixed;
        top: 0px;
        display: flex;
        justify-content: space-between;
        padding: 5px 0px;
        font-size: 1.1rem;
        text-align: center;
        z-index: 1;
	}
	.car_top>a{
        width: 3.5rem;
        line-height: 1rem;
        color: black;
        display: block;
        display: flex;
        align-items: center;
	}
	.car_top>a>em{
        width: 1.5rem;
        height: 1.5rem;
        margin-left: 10px;
        display: block;
	}
	.car_top>a>em>img{
		width: 100%;
		height: 100%;
	}
	.car_top>p{
        width: 70%;
        display: block;
        text-align:center;
        line-height:2.2rem;
        border: none;
        color:black;
        display:none;
	}
    .car_top>span>u{
		width: 1.5rem;
		height: 1.5rem;
        margin-top:0.2rem;
        margin-right:20px;
		display: block;
        opacity: 0.6;
	}
    .car_top>span>u>img{
        width: 100%;
        height: 100%;
	}
/*头部*/	
	.my_head{
		width: 100%;
		height: 15rem;
        background-color: #88d553d4;
        background-image:url('../../images/member_top_bg.png');
		background-size: cover;
        overflow:hidden;
	}
	.my_head>i{
        width: 5.5rem;
        height: 5.5rem;
        display: block;
        margin: 0 auto;
        margin-top: 3rem;
        border-radius: 100%;
        overflow: hidden;
	}
	.my_head>i>img{
		width: 100%;
		height: 100%;
	}
	.my_head>span{
        font-weight: lighter;
        line-height: 2rem;
        height: 2rem;
        /* display: block; */
        position: relative;
        left: 50%;
        margin-left: -1.1rem;
        z-index: 1;
	}
	.my_head>span>sup{
	    font-size: 0.45rem;
	    line-height: 0.6rem;
	    background-color: #ED5564;
	    height: 0.6rem;
	    padding: 0 0.1rem;
	    margin-left: 0.2rem;
	    border-radius: 0.1rem;
	    position: absolute;
	    z-index: 1;
	    top: 0;
	    right: -0.9rem;
	}
	.my_head>p{
        width: 100%;
        height: 4rem;
        margin-top: 0.5rem;
        display: block;
        background: rgba(0, 0, 0, 0.1);
        text-align: center;
        display: flex;
	}
	.my_head>p>span{
		width: 33%;
		height: 100%;
		color: white;
		font-size: 0.8rem;
		line-height: 0.7rem;
		text-align: center;
        display:block;
	} 
	.my_head>p>span>i{
        width: 1.5rem;
        height: 1.5rem;
        position: relative;
        left: 50%;
        margin-left: -0.5rem;
        font-size: 1.2rem;
        line-height: 1.5rem;
        display: block;
        margin-top: 0.5rem;
        margin-bottom: 0.3rem;
        font-style: normal;
        text-align: center;
	}	
    .my_head>p>span>i img{
        width:100%;
        height:100%;
    }	

 /*我的订单*/
    .order{
        padding: 0 20px;
        height: 2.6rem;
        width: 100%;
        margin-top: 10px;
        background: white;
        overflow: hidden;
    }
    .user{
        margin-top:1px;
        z-index:1;
    }
    .order>i{
        float: left;
        width: 1rem;
        height: 1rem;
        position: relative; 
        top: 50%;
        margin-top: -0.5rem;
        display: block;
    }
    .order>i>img{
        width: 100%;
        height: 100%;
    }
    .order>span{
        height: 2.6rem;
        display: block;
        float: left;
        line-height: 2.6rem;
        font-size: 1rem;
        margin-left: 0.5rem; 
    }		
    .order>u{
        width: 1rem;
        height: 1rem;
        display: block;
        margin-right: 2.3rem;
        position: relative; 
        top: 50%;
        margin-top: -0.5rem;
        float: right;
    }
    .order>u>img{
        width: 100%;
        height: 100%;
    }
    .order>em{
        display: block;
        height: 2.6rem;
        font-size: 0.8rem;
        line-height: 2.6rem;
        margin-right: 0.5rem;
        float: right;
        color: gray;
    }
/*order内容中的ul*/
    .orul_1{
        width: 100%;
        height: 4rem;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;        
    }
    .orul_1>li{
        width: 20%;
        height:4rem;
        border-top:1px solid #EEE;
        text-align:center;
    }   
    .orul_1>li>i{
        width: 1.4rem;
        height: 1.4rem;
        display: block;
        position: relative;
        left: 50%;
        margin-left: -0.7rem;
        margin-top: 0.9rem;
        margin-bottom: 0.1rem;
        opacity: 0.7;
    }
    .orul_1>li>i img{
        width:100%;
        height:100%;
    }
    .orul_1>li>span{
        font-size:0.8rem;
        color:gray;
    }

/*返回条*/
    .back{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 37px;
        width: 100%;
        background: white;
        margin-top: 10px;
        border-bottom: 0.1rem solid #EEE;
        opacity: 0.8;
    }
    .back a{
        color:black;
        text-decoration:none;
    }
    
    .back span{
        display: block;
        font-size: 0.9rem;
        line-height: 0.9rem;
        text-align: center;
        float: left;
        height: 0.9rem;
        width: 18%;		
    }
    .back span:nth-of-type(2){
        border-left: 0.5px solid #EEE;
        border-right: 0.5px solid #EEE;
    }

    /*app下载*/
    .app{
		width: 100%;
        height: 2.5rem;
        padding: 0.5rem;
        background: #F5F5F5;
        border-bottom: 0.1rem solid #EEE;
    }
    .app>p{
        width: 33.3%;
        display: block;
        text-align: center;
        font-size: 0.7rem;
        color: #808080;
        float: left;
        height:100%;
    }
    .app>p>em{
        line-height:0.5rem;
        display:block;
    }
    .app>p>span{
        height: 1.2rem;
        display: inline-block; 
        position: relative;
        marfin-top:0.3rem;
    }
    .app>p>span>b{
        height: 1.2rem;
        display: inline-block;
    }
    .app>p>span>i{
        height: 0.4rem;
        position: absolute;
        top: -5px;
        right: 0px;
        display: inline-block;
    }
    .app .secem{
        color: black;
    }
    .app>p>span img{
        height: 100%;
    }

    /* 云服务*/
    .cound{
        height: 2.2rem;
        font-size: 0.8rem;
        line-height: 2.2rem;
        color: #555;
        text-align: center;
        margin-bottom: 90px;
        background: #F5F5F5;
    }


</style>





